<template>
  <div class="app-container" align="center" style="width: 1300px">
    <div :style="{width: '90%'}">
      <el-card class="filter-container" shadow="hover" :style="{marginBottom: '10px'}">
        <div align="center">
          <div :style="{width: '90%'}">
            <el-select v-model="keyword" placeholder="请选择" :style="{width: '9%', float: 'left'}">
              <el-option v-for="(item, index) in keywordOptions" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
            <el-input v-model="queryInfo[keyword]" placeholder="请输入" clearable
                      :style="{width: '62%', margin: '1px', float: 'left'}">
            </el-input>
            <el-button icon="el-icon-search" type="primary" @click="getDataList()"
                       :style="{marginLeft: '10px', float: 'left'}" round>查询
            </el-button>
            <el-button icon="el-icon-refresh-right" @click="handleResetSearch()" :style="{float: 'left'}" round>重置</el-button>
          </div>
        </div>
      </el-card>

      <el-row type="flex" justify="center" align="top">
        <el-col :span="8">
          <div align="center">
            <el-card
              :hidden = "friendHidden"
              class="friend-card"
              align="center"
              shadow="hover" >
              <div align="center">
                <el-table
                  ref="tableList"
                  v-loading="listLoading"
                  :data="datalist"
                  :style="{width: '100%'}"
                  :highlight-current-row="true"
                >
                  <el-table-column label="人脉列表" align="center">
                    <template slot-scope="scope">
                      <el-row type="flex" justify="start" align="top">
                        <el-col :span="5">
                          <el-avatar :size="medium" :src="scope.row.avatar"></el-avatar>
                        </el-col>
                        <el-col :span="7">
                          <div class="text-nickName" align="start">{{scope.row.nickName}}</div>
                          <div class="text-brief" align="start">{{scope.row.signature}}</div>
                        </el-col>
                        <el-col :span="12">
                          <el-tooltip class="item" effect="dark" content="名片" placement="bottom">
                            <el-button icon="el-icon-user" @click="showCardDialog(scope.row, 'friend')" circle></el-button>
                          </el-tooltip>
                          <el-tooltip class="item" effect="dark" content="二度人脉" placement="bottom">
                            <el-button icon="el-icon-share" @click="showNetwork(scope.row.id)" circle></el-button>
                          </el-tooltip>
                          <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
                            <el-button icon="el-icon-delete" @click="removeDataById(scope.row.id)" circle></el-button>
                          </el-tooltip>
                        </el-col>
                      </el-row>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="pagination-container">
                <el-pagination
                  :style="{width: '100%'}"
                  background
                  layout="prev, pager, next"
                  :page-size="queryInfo.pageSize"
                  :current-page.sync="queryInfo.pageNum"
                  :total="queryInfo.total"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                />
              </div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="8">
          <div align="center">
            <el-card
              :hidden = "isHidden"
              class="friend-card"
              align="center"
              shadow="hover"
              :style="{width: '100%'}"
            >
              <div align="center">
                <el-table
                  ref="networkList"
                  v-loading="networkLoading"
                  :data="networkList"
                  :style="{width: '100%'}"
                  :highlight-current-row="true"
                >
                  <el-table-column label="二度人脉" align="center">
                    <template slot-scope="scope">
                      <el-row type="flex" justify="start" align="top">
                        <el-col :span="5">
                          <el-avatar :size="medium" :src="scope.row.avatar"></el-avatar>
                        </el-col>
                        <el-col :span="7">
                          <div class="text-nickName" align="start">{{scope.row.nickName}}</div>
                          <div class="text-brief" align="start">{{scope.row.signature}}</div>
                        </el-col>
                        <el-col :span="12">
                          <el-tooltip class="item" effect="dark" content="名片" placement="bottom">
                            <el-button icon="el-icon-user" @click="showCardDialog(scope.row, 'recommend')" circle></el-button>
                          </el-tooltip>
                          <el-tooltip class="item" effect="dark" content="三度人脉" placement="bottom">
                            <el-button icon="el-icon-share" @click="showThird(scope.row.id)" circle></el-button>
                          </el-tooltip>
                          <el-tooltip class="item" effect="dark" content="添加好友" placement="bottom">
                            <el-button icon="el-icon-plus" @click="friendRequest(scope.row.id, 2)" circle></el-button>
                          </el-tooltip>
                        </el-col>
                      </el-row>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="pagination-container">
                <el-pagination
                  :style="{width: '100%'}"
                  background
                  layout="prev, pager, next"
                  :page-size="networkParam.pageSize"
                  :current-page.sync="networkParam.pageNum"
                  :total="networkParam.total"
                  @size-change="handleNetworkSizeChange"
                  @current-change="handleNetworkCurrentChange"
                />
              </div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="8">
          <div align="center">
            <el-card
              :hidden = "isThirdHidden"
              class="friend-card"
              align="center"
              shadow="hover"
              style="width: 100%"
              :highlight-current-row="true"
            >
              <div align="center">
                <el-table
                  ref="networkList"
                  v-loading="thirdLoading"
                  :data="thirdList"
                  :style="{width: '100%'}"
                >
                  <el-table-column label="三度人脉" align="center">
                    <template slot-scope="scope">
                      <el-row type="flex" justify="start" align="top">
                        <el-col :span="5">
                          <el-avatar :size="medium" :src="scope.row.avatar"></el-avatar>
                        </el-col>
                        <el-col :span="12">
                          <div class="text-nickName" align="start">{{scope.row.nickName}}</div>
                          <div class="text-brief" align="start">{{scope.row.signature}}</div>
                        </el-col>
                        <el-col :span="9">
                          <el-tooltip class="item" effect="dark" content="名片" placement="bottom">
                            <el-button icon="el-icon-user" @click="showCardDialog(scope.row, 'recommend')" circle></el-button>
                          </el-tooltip>
                          <el-tooltip class="item" effect="dark" content="添加好友" placement="bottom">
                            <el-button icon="el-icon-plus" @click="friendRequest(scope.row.id, 3)" circle></el-button>
                          </el-tooltip>
                        </el-col>
                      </el-row>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="pagination-container">
                <el-pagination
                  :style="{width: '100%'}"
                  background
                  layout="prev, pager, next"
                  :page-size="thirdParam.pageSize"
                  :current-page.sync="thirdParam.pageNum"
                  :total="thirdParam.total"
                  @size-change="handleNetworkSizeChange"
                  @current-change="handleNetworkCurrentChange"
                />
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 对话框 -->
    <el-dialog title="选择好友" :visible.sync="dialogVisible" width="400px">
      <!-- 内容主体 -->
      <div align="center">
        <el-card class="friend-card" align="center" shadow="hover">
          <div align="center">
            <div :style="{width: '100%'}">
              <p :style="{width: '15%', float: 'left'}">昵称：</p>
              <el-input v-model="chooseFriend.nickName" placeholder="请输入" size="small" clearable
                        :style="{width: '58%', float: 'left'}">
              </el-input>
              <el-button icon="el-icon-search" type="primary" size="small" @click="getDataList()"
                         :style="{marginLeft: '1px', float: 'left'}" round>查询
              </el-button>
            </div>
          </div>
          <div align="center">
            <el-table
              ref="chooseTableList"
              v-loading="chooseListLoading"
              :data="chooseList"
              style="width: 100%"
              @row-click="rowRecommendClick"
            >
              <el-table-column label="好友列表" align="center">
                <template slot-scope="scope">
                  <el-row type="flex" justify="start" align="top">
                    <el-col :span="5">
                      <el-avatar :size="medium" :src="scope.row.avatar"></el-avatar>
                    </el-col>
                    <el-col :span="19">
                      <div class="text-nickName" align="start">{{scope.row.nickName}}</div>
                      <div class="text-brief" align="start">{{scope.row.signature}}</div>
                    </el-col>
                  </el-row>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="pagination-container">
            <el-pagination
              :style="{width: '100%'}"
              background
              layout="prev, pager, next"
              :page-size="chooseFriend.pageSize"
              :current-page.sync="chooseFriend.pageNum"
              :total="chooseFriend.total"
              @size-change="handleChooseSizeChange"
              @current-change="handleChooseCurrentChange"
            />
          </div>
        </el-card>
      </div>
    </el-dialog>
    <!-- 对话框 -->
    <el-dialog title="名片" :visible.sync="cardDialogVisible" width="700px" @close="cardDialogVisible = false">
      <!-- 内容主体 -->
      <div align="center">
        <el-card class="friend-card" align="center" shadow="hover">
          <div class="block">
            <el-avatar :size="80" :src="cardInfo.avatar"></el-avatar>
          </div>
          <div style="padding: 14px;">
            <div class="text-nickName" :style="{marginBottom: '10px'}">{{cardInfo.nickName}}</div>
            <div class="text-brief-long">{{cardInfo.signature}}</div>
            <el-tag size="small" type="success" class="card-tag">{{cardInfo.profession}}</el-tag>
            <el-tag size="small" class="card-tag">{{ cardInfo.gender === 1 ? '男' : '女' }}</el-tag>
            <div class="text-info">职业：{{cardInfo.profession}}</div>
            <div class="text-info">生日：{{cardInfo.birthday}}</div>
            <div class="text-info">手机：{{cardInfo.phone}}</div>
            <div class="text-info">邮箱：{{cardInfo.email}}</div>
            <div slot="footer" align="center">
              <el-button v-if="this.type === 'friend'" type="primary" round size="small" @click="showDialog(cardInfo.id)">推荐给其他好友</el-button>
              <el-button v-if="this.type === 'recommend'" type="primary" round size="small" @click="friendRequest(cardInfo.id)">发送好友请求</el-button>
              <el-button v-if="this.type === 'friend'" type="danger" round size="small" @click="removeDataById(cardInfo.id)">删除好友</el-button>
            </div>
          </div>
        </el-card>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/utils/request'
import {mapGetters} from "vuex";

export default {
  computed: {
    ...mapGetters([
      'name',
      'id',
      'user'
    ])
  },
  data() {
    return {
      keyword: "nickName",
      rules: {
        keyword: [{
          required: true,
          message: '请选择',
          trigger: 'change'
        }],
        queryInfo: [{
          required: true,
          message: '请输入',
          trigger: 'blur'
        }],
        chooseFriend: [{
          required: true,
          message: '请输入',
          trigger: 'blur'
        }],
      },
      recommendedID: '',
      keywordOptions: [{
        "label": "昵称",
        "value": "nickName"
      }, {
        "label": "账号",
        "value": "account"
      }, {
        "label": "职业",
        "value": "profession"
      }, {
        "label": "城市",
        "value": "city"
      }],
      type: '',
      rank: 1,
      cardInfo: {},
      // 获取好友列表查询参数对象
      queryInfo: {
        id: '',
        nickName: '',
        account: '',
        total: 1,
        pageNum: 1,
        pageSize: 8
      },
      networkParam: {
        id: '',
        total: 1,
        pageNum: 1,
        pageSize: 8
      },
      thirdParam: {
        id: '',
        total: 1,
        pageNum: 1,
        pageSize: 8
      },
      chooseFriend: {
        id: '',
        nickName: '',
        account: '',
        total: 1,
        pageNum: 1,
        pageSize: 8
      },
      friendHidden: true,
      datalist: [],
      networkList: [],
      thirdList: [],
      chooseList: [],
      isHidden: true,
      isThirdHidden: true,
      listLoading: false,
      networkLoading: false,
      thirdLoading: false,
      chooseListLoading: false,
      // 对话框
      dialogVisible: false,
      cardDialogVisible: false,

    }
  },
  created() {
    this.getDataList()
    console.log(this.user)
  },
  methods: {
    // 好友列表
    getDataList() {
      this.friendHidden = false
      this.isHidden = true
      this.isThirdHidden = true
      this.listLoading = true
      const params = this.queryInfo
      params.id = this.user.id
      request({
        url: '/friend/page',
        method: 'get',
        params
      }).then(response => {
        if (response.retCode !== '200') {
          this.friendHidden = true
          return this.$message.warning(response.retMsg)
        }
        this.datalist = response.data.records
        this.queryInfo.total = response.data.total
        this.listLoading = false
      })
    },
    getNetworkList(id) {
      this.networkLoading = true
      const params = this.networkParam
      params.id = id
      params.removeId = this.user.id
      params.nowId = this.user.id
      request({
        url: '/friend/page',
        method: 'get',
        params
      }).then(response => {
        if (response.retCode !== '200') {
          this.isHidden = true
          return this.$message.warning(response.retMsg)
        }
        console.log("2度")
        console.log(response.data.records)
        this.networkList = response.data.records
        this.networkParam.total = response.data.total
        this.networkLoading = false
      })
    },
    getThirdList(id) {
      this.thirdLoading = true
      const params = this.thirdParam
      params.id = id
      params.removeId = this.user.id
      params.nowId = this.user.id
      request({
        url: '/friend/page',
        method: 'get',
        params
      }).then(response => {
        if (response.retCode !== '200') {
          this.isThirdHidden = true
          return this.$message.warning(response.retMsg)
        }
        this.thirdList = response.data.records
        this.thirdParam.total = response.data.total
        this.thirdLoading = false
      })
    },
    getChooseList(reid) {
      this.chooseListLoading = true
      const params = this.chooseFriend
      params.id = this.user.id
      params.recommendedId = reid
      request({
          url: '/friend/page',
          method: 'get',
          params
      }).then(response => {
        if (response.retCode !== '200') {
          this.dialogVisible = false
          return this.$message.warning(response.retMsg)
        }
        this.chooseList = response.data.records
        this.chooseFriend.total = response.data.total
        this.chooseListLoading = false
      })
    },
    handleResetSearch() {
      this.queryInfo['query'] = {}
      this.getDataList()
    },
    // 显示对话框
    showCardDialog(row, str) {
      this.cardInfo = row
      this.type = str
      this.cardDialogVisible = true
    },
    // 选择推荐指向的好友
    showDialog(id) {
      this.recommendedID = id
      this.dialogVisible = true
      this.getChooseList(this.recommendedID)

    },
    async rowRecommendClick(row, column, event){

      const confirmResult = await this.$confirm(
        '确定向该好友推荐吗?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }
      ).catch(err => err)
      // 点击确定 返回值为：confirm
      // 点击取消 返回值为： cancel
      if (confirmResult === 'confirm') {
        const params = {}
        params.userId = this.user.id
        params.recommendId = this.cardInfo.id
        params.friendId = row.id
        params.reference = this.user.nickName
        params.recommendRank = this.cardInfo.rank
        params.toRank = row.rank
        request({
          url: '/recommend/sendRecommend',
          method: 'get',
          params
        }).then(response => {
          console.log("发送请求")
          console.log(response.retCode)
          if (response.retCode !== '200') return this.$message.error(response.retMsg)
          this.$message.success('发送请求成功！')
          this.getDataList()
          this.dialogVisible = false
          this.cardDialogVisible = false
        })
      }

    },

    // 显示二度人脉
    showNetwork(id) {
      this.isHidden = false
      this.getNetworkList(id)
      this.isThirdHidden = true

    },
    // 显示三度人脉
    showThird(id) {
      this.isThirdHidden = false
      this.getThirdList(id)

    },
    // 发送好友请求
    async friendRequest(id, rank){
      this.cardInfo.id
      const confirmResult = await this.$confirm(
        '确定向该用户发送好友请求吗?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }
      ).catch(err => err)
      // 点击确定 返回值为：confirm
      // 点击取消 返回值为： cancel
      if (confirmResult === 'confirm') {
        const params = {}
        params.userId = this.user.id
        params.recommendId = this.user.id
        params.friendId = id
        params.reference = this.user.nickName
        params.recommendRank = 0
        params.toRank = rank
        request({
          url: '/recommend/sendFriendRequest',
          method: 'get',
          params
        }).then(response => {
          console.log("发送请求")
          console.log(response.retCode)
          if (response.retCode !== '200') return this.$message.warning(response.retMsg)
          this.$message.success('发送请求成功！')
          this.getDataList()
          this.cardDialogVisible = false
        })
      }
    },
    // 删除
    async removeDataById(id) {
      const confirmResult = await this.$confirm(
        '此操作将删除该好友, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      // 点击确定 返回值为：confirm
      // 点击取消 返回值为： cancel
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      const params = {}
      params.userId = this.user.id
      params.friendId = id
      request({
        url: '/friend/delete',
        method: 'get',
        params
      }).then(response => {
        if (response.retCode !== '200') return this.$message.error('删除用户失败！')
        this.$message.success('删除用户成功！')
        this.getDataList()
        this.cardDialogVisible = false
      })
    },
    // 监听 pagesize改变的事件
    handleSizeChange(newSize) {
      // console.log(newSize)
      this.queryInfo.pageSize = newSize
      this.getDataList()
    },

    // 监听 页码值 改变事件
    handleCurrentChange(newSize) {
      // console.log(newSize)
      this.queryInfo.pageNum = newSize
      this.getDataList()
    },

    handleChooseSizeChange(newSize) {
      // console.log(newSize)
      this.chooseFriend.pageSize = newSize
      this.getChooseList(this.recommendedID)
    },

    handleChooseCurrentChange(newSize) {
      // console.log(newSize)
      this.chooseFriend.pageNum = newSize
      this.getChooseList(this.recommendedID)
    },


    handleNetworkSizeChange(newSize) {
      // console.log(newSize)
      this.networkParam.pageSize = newSize
      this.getNetworkList()
    },

    handleNetworkCurrentChange(newSize) {
      // console.log(newSize)
      this.networkParam.pageNum = newSize
      this.getNetworkList()
    },

  }
}
</script>

<style lang="scss" scoped>

</style>
